<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入Vue -->
    <script src="../../Vue_Origin/vue.js" type="text/javascript"></script> <!-- 开发使用的版本 -->
    <!-- <script src="../../Vue_Origin/vue.min.js" type="text/javascript"></script> // 生产使用的版本 -->

    <title>学习Vue的第三天</title>
</head>

<body>

    <!-- 创建容器 -->
    <div id="app">
        <h3>数据绑定【单向数据绑定&双向数据绑定】</h3>
        <!--
            Vue中有2种数据绑定的方式可读性差了
            1.单向绑定(v-bind): 数据只能从data流向页面。2.双向绑定(v-model): 数据不仅能从data流向页面，还可以从页面流向data。备注:
            1.双向绑定一般都应用在表单类元素上(如: input、select等)
            2,v-model:value 可以简写为 v-model，因为v-model默认收集的就是value
        -->
        <ul>
            <li>单向数据绑定<input type="text" v-bind:value="one_way"></li>
            <li>双向数据绑定<input type="text" v-model:value="two_way"></li>
        </ul>
    </div>

    <script type="text/javascript">
        //关闭vue在启动时生成生产提示
        // Vue.config.productionTip = false

        // 创建实例
        new Vue({
            el: '#app',// el用于指定当前的Vue实例作用与那个容器【此处容器为div id=app】，el的值通常选择Css的选择器字符串。
            data: {
                // data用于存储数据，供el所指定的容器使用。值可以是对象，也可以是函数（后期在了解）
                one_way: '单向',
                two_way: '双向',
            }
        })
    </script>
</body>

</html>